<template>
    <div class="ratings" ref="ratings">
			<div class="ratings-content">
				<div class="overview">
					<div class="overview-left">
						<div class="score">4.2</div>
						<div class="title">综合评分</div>
						<div class="rank">高于周边商家{{seller.rankRate}}%</div>
					</div>
					<div class="overview-right">
						<div class="score-wrapper">
							<div class="title">服务态度</div>
							<star :size="36" :score="seller.serviceScore"></star>
							<div class="score">{{seller.serviceScore}}</div>
						</div>
						<div class="score-wrapper">
							<div class="title">商品评分</div>
							<star :size="36" :score="seller.foodScore"></star>
							<div class="score">{{seller.foodScore}}</div>
						</div>
						<div class="delivery-wrapper">
							<div class="title">送达时间</div>
							<div class="delivery">{{seller.deliveryTime}}分钟</div>
						</div>
					</div>
				</div>
				<div class="split"></div>
				<ratingselect @select="selectRating" @toggle="toggle" :selectType="selectType" :onlyContent="onlyContent" :rating="ratings"></ratingselect>
				<div class="rating-wrapper">
					<ul>
						<li class="rating-item" v-for="rating in ratings" v-show="needShow(rating.rateType,rating.text)">
							<div class="avatar">
								<img :src="rating.avatar" width="28" height="28" >
							</div>
							<div class="content">
								<h1 class="name">{{rating.username}}</h1>
								<div class="star-wrapper">
									<star :size="24" :score="rating.score"></star>
									<span class="delivery" v-show="rating.deliveryTime">{{rating.deliveryTime}}</span>
								</div>
								<p class="text">{{rating.text}}</p>
								<div class="recommend" v-show="rating.recommend && rating.recommend.length">
									<span class="icon-thumb_up"></span>
									<span class="item" v-for="item in rating.recommend">{{item}}</span>
								</div>
								<div class="time">
									{{rating.rateTime | formatDate}}
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
</template>

<script>
const ALL = 2;
const ERR_OK = 0;
const debug = process.env.NODE_ENV !== 'production';

import BScroll from 'better-scroll';
import Star from '../star/star';
import {formatDate} from 'common/js/date';
import Ratingselect from '../ratingselect/ratingselect';
export default {
	props:{
		seller:Object
	},
	components:{
		Star,
		Ratingselect
	},
	data () {
		return {
			ratings:[],
			selectType: ALL,
      onlyContent: true
		}
	},
	created() {
		const url = debug ? '/api/ratings' : 'http://ustbhuangyi.com/sell/api/ratings';
		this.$http.get(url).then((response) => {
			response = response.body;
			if (response.errno === ERR_OK) {
				this.ratings = response.data;
				this.$nextTick(() => {
					this.scroll = new BScroll(this.$refs.ratings, {
						click: true
					});
				});
			}
		});
	},
	methods: {
		needShow (type,text) {
			if (this.onlyContent && !text) {
				return false;
			}
			if (this.selectType == ALL) {
				return true;
			} else {
				return type === this.selectType
			}
		},
		toggle () {
			this.onlyContent = !this.onlyContent;
		},
		selectRating (index) {
			this.selectType = index;
			console.log(index);
		}
	},
	filters: {
		formatDate(time) {
			let date = new Date(time);
			return formatDate(date, 'yyyy-MM-dd hh:mm');
		}
	},
}
</script>

<style lang="stylus" scoped>
.overview
	padding 18px 0
	display flex
	&-left
		width 137px;
		border-right 1px solid rgba(7,17,27,.1)
		padding 6px 0
		text-align center
		font-size 12px
		.score
			color:#f90
			font-size 24px
			line-height 28px
			margin-bottom 10px
		.title
			margin-bottom 8px
			color #07111b
		.rank
			color #93999f
			font-size 10px
			line-height 10px
	&-right
		padding 6px 0 6px 24px
		line-height 18px
		flex 1
		& > div
			display flex
			margin-bottom 8px
			.title
				color:#07111b
				font-size 12px
				margin-right 12px
		.delivery
			color:#93999f
			font-size 12px;
		.score
			color:#f90
			font-size 12px
.split
	border-top 1px solid rgba(7,17,27,.1)
	border-bottom 1px solid rgba(7,17,27,.1)
	height 16px
	background-color #f3f5f7
.star
	margin-right 12px
.rating-wrapper
	padding 0 18px
.rating-item
	display flex
	padding 18px 0
	.avatar
		img
			border-radius 50%
			margin-right 12px
	.content
		position relative
		flex 1
	.name
		font-size 10px
		color #07111b
		margin-bottom 4px
		line-height 12px
	.star
		display inline-block
		vertical-align top
		margin-right 6px
	.delivery
		display inline-block
		vertical-align top
		line-height 12px
		color #93999f
		font-size 10px
	.text
		line-height 18px
		color #07111b
		font-size 12px
		margin-bottom 8px
	.icon-thumb_up
		color #00a0dc
	.item
		padding  0 6px
		border 1px solid rgba(7,17,27,.1)
		border-radius 1px
		color #93999f
		background #fff
		font-size 9px
		margin 0 8px 4px 0
		display inline-block
		line-height 16px
	.time
		position absolute
		right 0
		top 0
		font-size 10px;
		line-height 12px
		color #93999f
</style>
Revised with July 20, 2018, modified by zhang liangxue

